<template>
	<div class="cl-header container-fluid">
		<div class="header-content container">
			<nav class="navbar navbar-expand-lg navbar-light">
				<a class="navbar-brand" href="calmlog-index.html">
					<img :src="LogoJPG" width="144" height="72" alt="">
				</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse justify-content-end" id="navbarNav" :category-id='categoryId'>
					<!-- 标签绑定categoryId -->
					<ul class="navbar-nav">
						<li class="nav-item" :class="{active: !category_id}">
							<a class="nav-link" href="/#/index">首页 <span class="sr-only">(current)</span></a>
						</li>
						<li class="nav-item" v-for="item in categoryList" :key="item.category_id" :class="{active: category_id == item.category_id}">
							<!-- 若头部的category_id == 数据库的category_id，就绑定class的active -->
							<a class="nav-link" :href="'/#/list?category_id='+item.category_id">{{ item.category_name }}</a>
						</li>
					</ul>
				</div>
			</nav>
		</div>
	</div>
</template>

<script>
	import LogoJPG from "../assets/img/logo.jpg"
	import axios from "axios"

	export default {
		name: 'Heater',
		data: function() {
			return {
				LogoJPG: LogoJPG,
				category_id: 0,
				categoryList: []
			};
		},
		props: ['categoryId'], //外围（父类app）传递categoryId
		created: function() {
			// this.category_id = getQueryParam("category_id",0);//根据分类列表页面获取category_id
			this.category_id = this.$route.query.category_id;
			if (this.categoryId > 0) { //当父类的categoryId大于0，就把父类的categoryId获取到的id传给category_id
				this.category_id = this.categoryId;
			}

			let _this = this;

			axios.get("http://localhost:8901/api/category/list")
				.then(function(response) {
					if (response.data.status == 0) {
						console.log(response);
						_this.categoryList = response.data.data.categoryList;
					}
				})
				.catch(function(error) {
					console.log(error);
				});
		},
		watch: {
			categoryId: function(newVal) {
				this.category_id = newVal;
			},

			$route: function(newVal) {
				this.category_id = newVal.query.category_id;
				this.getArticleList(1);
			}

		}
	}
</script>

<style>

</style>
